<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>手机绑定</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">

	<meta http-equiv="Pragma"   content= "no-cache" /> 
	<meta http-equiv= "Cache-Control"   content= "no-cache" /> 
	<meta http-equiv= "Expires"   content= "0" />

	<link rel="stylesheet" href="/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="/css/user.css" media="all" />
</head>
<body class="childrenBody">
	<form class="layui-form">

		<input type="hidden" name="id" th:value="${userId}">
		<div class="layui-form-item">
		    <label class="layui-form-label">旧手机</label>
		    <div class="layui-input-block">
		    	<input type="tel" value="" disabled="disabled" name="oldMobile" th:value="${mobile}"  lay-verify="required"  class="layui-input pwd">
		    </div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">新手机</label>
			<div class="layui-input-block">
				<input type="tel" value="" name="mobile" placeholder="请输入新手机号码" lay-verify="required|phone|newMobile" id="newMobile" class="layui-input pwd">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">确认手机</label>
			<div class="layui-input-block">
				<input type="tel" value="" placeholder="请确认手机号码" name="confirmMobile" lay-verify="required|phone|confirmMobile" class="layui-input pwd">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">验证码</label>
				<div class="layui-input-block">
					<input id="validateCode"  maxlength="6" type="text" name="validateCode"
						   placeholder="请输入验证码" lay-verify="required"  required   autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-warm" id="checkCode" >发送验证码</button>
				</div>
			</div>
		</div>
		<div class="layui-form-item">
		    <div class="layui-input-block">
		    	<button class="layui-btn" lay-submit="" lay-filter="changeMobile">立即修改</button>
		    </div>
		</div>
	</form>
	<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="/js/common.js"></script>
	<script type="text/javascript" src="/layui/layui.js"></script>
	<script type="text/javascript">

        layui.config({
            base : "/layui/"
        }).extend({
            index: 'lib/index'
        }).use(['index','form','jquery', 'table'],function(){
            var  form = layui.form;
            form.verify({
                confirmMobile : function(value, item){
                    if(!new RegExp($("#newMobile").val()).test(value)){
                        return "两次输入密码不一致，请重新输入！";
                    }
                }
            });

            //ajax异步验证码发送
            $("#checkCode").click(function (el) {

                $.ajax({
                    type: "POST", //提交方式
                    url: "/safe/sendValidateCode",//路径
                    data: {
                        "bizType": "MOBILE_MODIFY"
                    },
                    success: function (result) {//返回数据根据结果进行相应的处理

                        if(result.code==1){

                            layer.msg(result.message);

                            //设置按钮不能被点击
                            $("#checkCode").attr("disabled", true);
                            //按钮30s秒倒计时
                            var time = 30;
                            var id = setInterval(function () {
                                if (time >= 1) {
                                    time--;
                                    $("#checkCode").html(time + "s后重新发送");
                                } else {
                                    //倒计时结束按钮又可以再次被点击
                                    clearInterval(id);
                                    $("#checkCode").removeAttr("disabled", false).html("重新发送");
                                }
                            }, 1000);


                        }else {
                            layer.msg(result.message);
                        }
                    }
                });

            })

            form.on("submit(changeMobile)",function(data){

                $.post("/safe/updateMobile",data.field,function (result) {
                    if(result.code==1){
                        $("#validateCode").val(null);
                        layer.msg(result.message);
                    }else {
                        layer.msg(result.message)
                    }
                })

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });


		});

	</script>
</body>
</html>